<template>
<div>
  <vm-common-header
    :pageTitle="pageTitle"
    :goBack="goBack"></vm-common-header>
  <div class="page-container">
    <vm-common-details-ul-title
    :Codes="cProductCode"
    :Title="cIBidsTatle"></vm-common-details-ul-title>
    <div
      class="pretrial-info"
      v-for="(item, key) in data"
      :key="key">
      <!-- 资质 -->
      <div class="aptitude">
        <div class="aptitude-t">
          <h6>资质</h6>
          <div class="aptitude-t-info">
            <em class="count">第{{ key + 1 }}次</em>
            <p class="time">{{ item.dCheckDate }}</p>
          </div>
        </div>
        <div class="aptitude-b">
          <div class="img">
            <img class="previewer-demo-img"
                 v-for="(item, index) in item.cQualification"
                 :key="index"
                 :src='"http://www.vocoor.cn/" + item.cPicUrl'
                 width="100"
                 @click="show1(index)">
            <div v-transfer-dom>
              <previewer :list="cQualificationArr" ref="previewer1"></previewer>
            </div>
          </div>
        </div>
      </div>
      <!-- 业绩 -->
      <div class="achievement">
        <div class="achievement-t">
          <h6>业绩</h6>
        </div>
        <div class="achievement-b">
          <div class="img">
            <img class="previewer-demo-img"
                 v-for="(item, index) in item.cBond"
                 :src="'http://www.vocoor.cn/' + item.cPicUrl"
                 width="100"
                 @click="show2(index)"
                 :key="index">
            <div v-transfer-dom>
              <previewer :list="cBondArr" ref="previewer2"></previewer>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import vmCommonHeader from '@/components/vm-common-header' // header 组件
import vmCommonDetailsUlTitle from '@/components/vm-common-item/vm-common-DetailsUlTitle' // 公共详情页UL标题
import { transaction_reviewlist } from '@/api/vm-common-details.js'
import { Previewer, TransferDom } from 'vux'
export default {
  data() {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      id: this.$route.params.id,
      data : new Array(),
      cProductCode: '', // 招标编号
      cIBidsTatle: '', // 公告主题
      cQualificationArr: new Array(), // 资质数组
      cBondArr: new Array() // 业绩数组
    }
  },
  components: {
    'vm-common-header': vmCommonHeader,
    'vm-common-details-ul-title': vmCommonDetailsUlTitle,
    Previewer
  },
  directives: {
    TransferDom
  },
  created () {
    this.getreviewlistData();
  },
  methods: {
    // 资质缩略图
    show1 (index) {
      this.$refs.previewer1[0].show(index);
    },
    // 业绩缩略图
    show2 (index) {
      this.$refs.previewer2[0].show(index)
    },
    getreviewlistData () {
      transaction_reviewlist(this.id).then(res => {
        this.data = res.data.data;
        this.cProductCode = this.data[0].cProductCode;
        this.cIBidsTatle = this.data[0].cIBidsTatle;
        this.cQualificationArr = this.data[0].cQualification.map(item => {
          var tObj = new Object();
          tObj.msrc = `http://www.vocoor.cn${item.cPicUrl}`;
          tObj.src = `http://www.vocoor.cn${item.cPicUrl}`;
          tObj.w = 800;
          tObj.h = 500;
          return tObj;
        });
        this.cBondArr = this.data[0].cBond.map(item => {
          var tObj = new Object();
          tObj.msrc = `http://www.vocoor.cn${item.cPicUrl}`;
          tObj.src = `http://www.vocoor.cn${item.cPicUrl}`;
          tObj.w = 800;
          tObj.h = 500;
          return tObj;
        });
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: scroll;
  .pretrial-info {
    border-radius: 15px; /* no */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    margin: 20px;
    .aptitude,
    .achievement{
      display: flex;
      flex-direction: column;
      .aptitude-t,
      .achievement-t {
        display: flex;
        border-bottom: 1px solid #dcdcdc; /* no */
        height: 90px;
        align-items: center;
        padding-left: 20px;
        h6 {
          font-size: 36px;
          color: #000000;
          margin-right: 25px;
          display: flex;
          align-items: center;
          &::before {
            content: '';
            width: 8px;
            height: 32px;
            display: inline-block;
            background-color: #f9676a;
            margin-right: 15px;
          }
        }
        .aptitude-t-info,
        .achievement-t-info{
          .count {
            font-size: 24px;
            color: #1ac6b1;
            display: flex;
            justify-content: flex-start;
          }
          .time {
            font-size: 18px;
            color: #999999;
          }
        }
      }
      .aptitude-b,
      .achievement-b{
        margin: 0 15px;
        .img {
          padding: 20px 0px;
          overflow: scroll;
          display: flex;
          flex-flow: row nowrap;
          img {
            width: 212px;
            height: 150px;
            margin-right: 5px;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}
</style>
